<template>
  <a-form :form="form">
    <!-- name -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="名字"
    >
      <a-input
        v-decorator="[
          'name',
          { rules: [{ required: true, message: '请填写你的名字' }] },
        ]"
        placeholder="请填写你的名字"
      />
    </a-form-item>
    <!-- phone -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="手机号"
    >
      <a-input
        type="tel"
        v-decorator="[
          'phone',
          { rules: [{ required: true, message: '请填写你的手机号' }] },
        ]"
        placeholder="请填写你的手机号"
      />
    </a-form-item>
    <!-- 邮箱 -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="邮箱"
    >
      <a-input
        type="email"
        v-decorator="[
          'email',
          { rules: [{ required: true, message: '请填写你的邮箱' }] },
        ]"
        placeholder="请填写你的邮箱"
      />
    </a-form-item>
     <!-- 权限 -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="权限"
    >
      <a-select
        v-decorator="[
          'lv',
          { rules: [{ required: true, message: '请选择权限等级' }] },
        ]"
      >
        <a-select-option :value="1">高级管理员权限</a-select-option>
        <a-select-option :value="2">初级管理员权限</a-select-option>
      </a-select>
    </a-form-item>
    <!-- 密码 -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="密码"
    >
      <a-input
        type="password"
        v-decorator="[
          'password',
          { rules: [{ required: true, message: '请填写你的密码' }] },
        ]"
        placeholder="请填写你的密码"
      />
    </a-form-item>
    <!-- 确认密码 -->
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="确认密码"
    >
      <a-input
        type="password"
        v-decorator="[
          'enterpassword',
          { rules: [{ required: true, message: '请确认你的密码' }] },
        ]"
        placeholder="请确认你的密码"
      />
    </a-form-item>
    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-button  :loading="btnLoading" type="primary" @click="check">
        新增
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { message } from 'ant-design-vue';
import { post } from './../../../../utils/request';
// import { jm } from './../../../../utils/safe';

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
export default {
  data() {
    return {
      checkNick: false,
      formItemLayout,
      formTailLayout,
      btnLoading: false,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
    };
  },
  props: ['addModelContrulor', 'callback'],
  methods: {
    check() {
      console.log('getFieldsValue', this.form.getFieldsValue());
      this.form.validateFields(err => {
        if (!err) {
          console.info('success');
          const params = this.form.getFieldsValue();
          delete params.enterpassword;
          this.btnLoading = true;
          post('/user/createUser', params)
            .then(()=>{
                message.success('添加成功！');
                this.addModelContrulor(false);
                this.callback();
            })
            .finally(()=>{
                this.btnLoading = false;
            })
        }
      });
    },
    // 
    handleRegister (params){
        post('/user/registerAdmin', {
            ...params
        })
            .then(()=>{
                message.success('注册成功！即将跳转登陆页！');
                
            })
    },
  },
};
</script>